<template>
	<scroll-view class="content" scroll-y="true">
		<ms-navbar></ms-navbar>
		<view class="top-bar">
			<img src="../../static/logo.png" alt="" />
			<view class="state">开盘中</view>
		</view>
		<!-- 日期 -->
		<view class="date-bar">{{getDate}}</view>
		
		<!-- 样板 -->
		<view class="panes">
			<view class="pane" v-for="p,index in paneList" :key="index" @click="handleDetail(p.code)">
				<view class="p-name">{{p.name}}</view>
				<view class="p-num">{{p.newPrice}}</view>
				<view class="p-items">
					<view class="p-new-price">{{(p.priceGap>=0?'+':'')+p.priceGap.toFixed(1)}}</view>
					<view class="p-rate">{{p.fluctuate+'%'}}</view>
				</view>
			</view>
		</view>
		
		<!-- 占比 -->
		<view class="progress-bar">
			<view class="progresses">
				<view class="progress-green"></view>
				<view class="progress-gray"></view>
				<view class="progress-red"></view>
			</view>
			<view class="progress-text">
				<text style="color: green;">跌 346家</text>
				<text style="color: red;">涨 4977家</text>
			</view>
		</view>
		
		<!-- 头条 -->
		<view class="hot-news">
			<view class="hot-title" style="margin-right: 10rpx;"><u-tag text="同花顺头条" type="error" plain plainFill></u-tag></view>
			<view class="hot-content" @click="handleNewsPage">{{newsList[0].wtitle}}</view>
			<view class="hot-icon"><u-icon name="arrow-down" size="20"></u-icon></view>
		</view>
		<!-- 今日板块 -->
		<view class="today-container">
			<view class="title-bar">
				<view class="title">今日板块</view>
				<view class="more">查看全部模块</view>
			</view>
			<scroll-view class="modules" scroll-x="true" enable-flex @scroll="scroll">
				<view class="module" v-for="t,idx in 3" :key="idx">
					<view class="label">{{getLabel(idx)}}</view>
					<view class="cards">
						<view class="card" v-for="i,index in getTypeStock(idx)" :key="index" @click="handleDetail(i.code,i.sname)">
							<view class="card-title">{{i.tname}}</view>
							<view class="card-rate" :style="{color: i.trate >= 0 ? '#4CAF50' : '#f15e18'}">{{numberFix(i.trate*1)}}%</view>
							<view class="card-company">{{i.sname}}</view>
							<view class="card-rate2" :style="{color: i.srate >= 0 ? '#4CAF50' : '#f15e18'}">{{numberFix(i.srate*1)}}%</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 排行 -->
		<view class="ranks">
			<view class="title-bar">
				<view class="title">股票排行</view>
			</view>

			<u-tabs :list="tabList" :current="current" lineColor="#f16017" :activeStyle="styles" @click="handleTab"></u-tabs>
			<view class="rank-item">
				<view class="list-container">
					<view class="list-item sample" style="margin-bottom: 30rpx;">
						<view class="name">股票名称</view>
						<view class="newPrice">最新价</view>
						<view class="fluctuate">涨跌幅</view>
						<view class="speed">涨速</view>
					</view>
					<view class="list-item" v-for="i in rankList(current)" :key="i.code" @click="handleDetail(i.code,i.name)">
						<view class="name">
							<view class="name-box">{{i.name}}</view>
							<view class="code-box" style="font-size: 20rpx;color: #b5b5b5;">{{i.code}}</view>
						</view>
						<view class="newPrice">{{i.newPrice}}</view>
						<view class="fluctuate" :style="{color: i.fluctuate > 0 ? '#4CAF50' : '#f15e18'}">{{(i.fluctuate>0?'+':'')+i.fluctuate+'%'}}</view>
						<view class="speed" :style="{color: i.speed > 0 ? '#4CAF50' : '#f15e18'}">{{(i.speed>0?'+':'')+i.speed+'%'}}</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { dateFormater } from '../../utils/dateFormat'
	import { getNewsList } from '../../api/new.js'
	import { getStockList, listClass,listArea,listIndustry } from '../../api/stock.js';
	import store from '../../store';
	export default {
		data() {
			return {
				current:0,
				tabList: [
					{name:'涨幅榜'}, 
					{name:'跌幅榜'}, 
					{name:'成交榜'}, 
					{name:'涨速榜'},
				],
				paneList:[],
				list:[
					{name:'佰维存储',code:'123456',newPrice:44.92,fluctuate:20.01,speed:0.36},
					{name:'苏交科',code:'546515',newPrice:4.92,fluctuate:19.01,speed:0.36},
					{name:'因赛集团',code:'789542',newPrice:48.92,fluctuate:10.01,speed:0.36},
					{name:'同有科技',code:'126454',newPrice:64.92,fluctuate:-9.01,speed:0.36},
					{name:'康平科技',code:'789542',newPrice:8.92,fluctuate:9.01,speed:0.36},
					{name:'天利科技',code:'126454',newPrice:9.92,fluctuate:4.01,speed:0.36},
					{name:'瑞玛科技',code:'546515',newPrice:55.92,fluctuate:8.01,speed:0.36},
					{name:'硕贝德',code:'954351',newPrice:67.92,fluctuate:13.01,speed:0.36},
				],
				styles:{
					transform:'scale(1.25)',
					transition:'all 0.5s'
				},
				allStocks: [],
				rankStocks:[],
				typeStocks:{
					classStocks: [],
					industryStocks: [],
					areaStocks: [],
				},
				newsList:[],
			}
		},
		computed:{
			getDate(){
				return dateFormater(new Date())
			},
		},
		methods: {
			scroll(){},
			handleTab(item){
				this.current = item.index
			},
			handleDetail(code,name) {
				uni.navigateTo({ url: `/pages/detail/detail?code=${code}&name=${name}` })
			},
			handleNewsPage(){
				uni.navigateTo({ url: `/pages/new/new?newObj=${JSON.stringify(this.newsList[0])}` })
			},
			async fetchPaneStock() {
				try {
					const stocks = await getStockList(['sh000001','sz399001','sz399006']);
					this.paneList = stocks;
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			async fetchRankStock() {
				try {
					const stocks = await getStockList(['sz002809','sz301560','sz301131','sz301076','sz003003','sz301396','sh603280','sz002165','sz301079']);
					this.rankStocks = stocks;
					console.log('rank:',stocks);
					
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			async fetchClassStock() {
				try {
					const stocks = await listClass();
					this.typeStocks.classStocks = stocks;
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			async fetchAreaStock() {
				try {
					const stocks = await listArea();
					this.typeStocks.areaStocks = stocks;
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			async fetchIndustryStock() {
				try {
					const stocks = await listIndustry();
					this.typeStocks.industryStocks = stocks;
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			async fetchNews() {
				try {
					const news= await getNewsList(1);
					this.newsList = news;
					console.log('news:',news);
					
				} catch (error) {
					console.error('获取股票数据失败:', error);
				}
			},
			getLabel(idx){
				switch (idx) {
					case 0:return '热门概念'
					case 1:return '热门地区'
					case 2:return '热门行业'
					default:return
				}
			},
			getTypeStock(idx){
				const stocks = this.typeStocks;
				switch (idx) {
					case 0:
						return Array.isArray(stocks.classStocks) ? stocks.classStocks : [];
					case 1:
						return Array.isArray(stocks.industryStocks) ? stocks.industryStocks : [];
					case 2:
						return Array.isArray(stocks.areaStocks) ? stocks.areaStocks : [];
					default:
						return [];
				}
			},
			numberFix(num){
				return num.toFixed(2)
			},
			rankList(cur){
				switch (cur) {
					case 0:
						return JSON.parse(JSON.stringify(this.rankStocks))?.sort((a,b)=>b.fluctuate-a.fluctuate)
						break;
					case 1:
						return JSON.parse(JSON.stringify(this.rankStocks))?.sort((a,b)=>a.fluctuate-b.fluctuate)
						break;
					case 2:
						return JSON.parse(JSON.stringify(this.rankStocks))?.sort((a,b)=>b.dealCount-a.dealCount)
						break;
					case 3:
						return JSON.parse(JSON.stringify(this.rankStocks))?.sort((a,b)=>b.speed-a.speed)
						break;
					default:
						break;
				}
			}
		},
		onReady() {
			this.fetchPaneStock();
			this.fetchClassStock()
			this.fetchAreaStock()
			this.fetchIndustryStock()
			this.fetchRankStock()
			this.fetchNews()
			// 每30秒刷新一次数据
			// this.refreshTimer = setInterval(() => {
			// 	this.fetchPaneStock();
			// }, 30000);
		},
		
		onShareAppMessage() {
			return {
				title: '股市行情',
				path: '/pages/market/market',
				imageUrl: '../../static/logo.png'
			}
		},
		watch: {
		  keyWord() {
		    if (this.keyWord.trim() !== '') {
		      this.filterStocks();
		    }
		  }
		},
		onTabItemTap() {
			let {route} = getCurrentPages()[0]
			console.log(route);
			switch (route){
				case 'pages/message/message':
					store.commit('setNavTitle','资讯')
					break;
				case 'pages/option/option':
					store.commit('setNavTitle','自选')
					break;
				case 'pages/market/market':
					store.commit('setNavTitle','行情')
					break;
				default:
					break;
			}
		},
	}
</script>

<style lang="scss">

.top-bar{
	display: flex;
	gap: 20rpx;
	align-items: center;
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 20rpx;
	img{
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
}
.date-bar{
	margin: 20rpx 0 40rpx;
}
.progress-bar{
	font-size: 24rpx;
	margin: 40rpx 10rpx;
	.progresses{
		display: flex;
		gap: 10rpx;
		overflow: hidden;
		border-radius: 10rpx;
		view{
			height: 15rpx;
			transform: skew(-20deg);
		}
		.progress-green {
			width: 6%;
			background-color: green;
		}
		.progress-gray {
			width: 2%;
			background-color: gray;
		}
		.progress-red {
			width: 92%;
			background-color: red;
		}
	}
	.progress-text{
		display: flex; 
		justify-content: space-between;
		margin-top: 5rpx;
	}
}
.panes{
	display: flex;
	justify-content: space-between;
	gap: 30rpx;
	.pane{
		display: flex;
		flex:1;
		gap: 8rpx;
		font-size: 28rpx;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		color: #fff;
		border-radius: 10px;
		background: linear-gradient(90deg,#e9322f,#f15e18);
		.p-items{
			display: flex;
			gap: 15rpx;
		}
	}
}
.hot-news{
	width: 100%;
	display: flex;
	gap: 10rpx;
	align-items: center;
	padding: 30rpx;
	margin: 20rpx 10rpx;
	border-radius: 15rpx;
	box-shadow: 0 0 6rpx 4rpx rgba(225, 225, 225, 0.5);
	.hot-title{
		color: #f3594d;
	}
	.hot-title,.hot-icon{
		width: fit-content;
	}
	.hot-content{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.today-container{
	width: 100%;
	overflow: hidden;
}
.title-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
	padding: 10rpx;
	.title{
		font-size: 45rpx;
		font-weight: bold;
	}
	.more{
		font-size: 28rpx;
		color: #b5b5b5;
	}
}
.modules{
	white-space: nowrap;
	width: 100%;
	height: fit-content;
}
.module{
	position: relative;
	display: inline-block;
	width: fit-content;
	height: 280rpx;
	overflow: hidden;
	box-shadow: 0 0 8rpx 8rpx rgba(225, 225, 225, 0.5);
	margin: 30rpx 20rpx 30rpx 10rpx;
	padding-top: 40rpx;
	border-radius: 20rpx;
	font-size: 28rpx;
	.label{
		font-size: 24rpx;
		position: absolute;
		text-align: center;
		left: 0;
		top:0;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		color:#fff;
		background: linear-gradient(90deg,#ea332e,#f16018);
		border-bottom-right-radius: 20rpx;
	}
	.cards{
		height: 100%;
		display: flex;
		align-items: center;
		.card{
			border-right: 2rpx solid #e7e7e7;
			display: flex;
			padding: 0 15rpx;
			flex-direction: column;
			align-items: center;
			gap: 5rpx;
			.card-rate,.card-rate2{
				color:#e84037
			}
		}
		.card:last-child{
			border: none;
		}
	}
}
.ranks{
	width: 100%;
	height: fit-content;
}
.rank-item{
	height: 300rpx;
}

.list-container{
	width: 100%;
	padding-top: 20rpx;
	margin-left: -20rpx;
	.list-item{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		margin-bottom: 10rpx;
	}
	.list-item view{
		padding-left: 30rpx;
	}
	.newPrice,.fluctuate{
		color: #f15e18;
	}
	.name view{
		padding: 0;
	}
	.sample view{
		font-size: 28rpx;
		color: #b5b5b5;
	}
}
.u-tabs{
	margin-left: -5rpx;
}
</style>




